<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">

      <!-- 头部导航搜索添加等 -->

      <el-input v-model="listQuery.title" placeholder="输入关键词" style="width: 200px;" class="filter-item"
        @input="handleFilter()" @keyup.enter.native="handleFilter" />

      <el-select v-model="listQuery.sort" style="width: 140px; margin-left: 10px;" class="filter-item"
        @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
        @click="handleCreate">
        新增
      </el-button>
      <el-button
        v-if='all_type==2'
        class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete"
        @click="handleDelete(0,1)">
        批量删除
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-camera"
        @click="clone(0,1)">
        批量克隆
      </el-button>

      <Tinymce2  style='display: none;' width='700px' v-model="sortOptions" />
    </div>

    <!-- 列表主体 -->
    <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    style="width: 100%;"

    @selection-change="handleSelectionChange"
    @sort-change="sortChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <!--  -->
      <!-- <el-table-column label="ID" fixed prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="基本信息"  width="400px" align="left">
        <template slot-scope="{row}">
          <p style="font-size: 18px;font-weight: bold;">模板名：{{ row.title }}</p>

          <p style="float: left;">
            主色调：
            <span
              style="display: block; width: 30px;height: 30px;margin-left: 5px;"
              :style="{
                'background-color':row.color1
              }"
            ></span>
          </p>
          <p style="float: left;">
            辅色调：
            <span
              style="display: block; width: 30px;height: 30px;margin-left: 5px;"
              :style="{
                'background-color':row.color2
              }"
            ></span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="文本信息" width="150px" align="center">

        <template slot-scope="{row}">
          <el-popover
            placement="left"
            width="400"
            trigger="click">
            <div  class="html">
                <p>ID：{{ row.id }}</p>
                <p>创建人：{{ row.admin_name }}</p>
                <p v-if="row.is_video==0">活动类型：照片活动</p>
                <p v-if="row.is_video!=0">活动类型：视频活动</p>
                <p v-if="row.is_day_t==0">每日可投票次数：{{row.day_t_num}}</p>
                <p v-if="row.is_day_t!=0">每日可投票次数：非每日可投票</p>
                <p>可上传图片数量：{{row.update_img_number}}</p>
                <p>可查看排行版数量：{{ row.ph_number }}</p>
                <p v-if="row.is_liwu==0">礼物组：{{row.liwu_name}}</p>
                <p v-if="row.is_liwu!=0">礼物组：未开启礼物</p>
                <p>录入时间：{{ row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</p>
            </div>
            <el-button slot="reference" style="margin-bottom: 10px;">模板详情</el-button>
          </el-popover>
          <el-popover
            placement="left"
            width="400"
            trigger="click">
            <div class="html" v-html="row.Announcement">

            </div>
            <el-button slot="reference"  style="margin-bottom: 10px;">查看公告</el-button>
          </el-popover>
          <el-popover
            placement="left"
            width="400"
            trigger="click">
            <div class="html" v-html="row.Description">

            </div>
            <el-button slot="reference"  style="margin-bottom: 10px;">活动说明</el-button>
          </el-popover>
          <el-popover
            placement="left"
            width="400"
            trigger="click">
            <div  class="html" v-html="row.jpsm">

            </div>
            <el-button slot="reference" style="margin-bottom: 10px;">奖品说明</el-button>
          </el-popover>


        </template>
      </el-table-column>
      <el-table-column label="媒体信息" align="center">
        <template slot-scope="{row}">
          <el-popover
            placement="left"
            width="400"
            trigger="click">
            <div  class="html">
              <el-image
                style="width: 400px; height: 400px"
                :src="row.titleback"
                fit="cover"></el-image>
            </div>
            <el-button slot="reference" style="margin-bottom: 10px;">title背景图</el-button>
          </el-popover><br />
          <el-popover
            placement="left"
            width="400"
            trigger="click">
            <div  class="html">
              <el-image
                style="width: 400px; height: 400px"
                :src="row.phb_banner"
                fit="cover"></el-image>
            </div>
            <el-button slot="reference"  style="margin-bottom: 10px;">排行榜banner</el-button>
          </el-popover><br />
          <el-popover
            placement="left"
            width="550"
            trigger="click">
            <div  class="html">

                <h1>音频：</h1>
                <aplayer :audio="{
                  name: row.title,
                  artist: row.admin_name,
                  url: row.music,
                  cover: row.banner[0], // prettier-ignore

                }" :lrcType="3" ref="aplayer"/>
                <h1>轮播图(点击查看大图)：</h1>
                <el-carousel height="200px">
                  <el-carousel-item v-for="item in row.banner" :key="item">
                    <el-image
                      :preview-src-list="row.banner"
                      style="width: 450px; height: 200px"
                      :src="item"
                      fit="contain">
                   </el-image>
                  </el-carousel-item>
                </el-carousel>
                <h1>分享背景图(点击查看大图)：</h1>
                <el-image
                 :preview-src-list="[row.background]"
                 style="width: 450px; height: 200px"
                 :src="row.background"
                 fit="contain">
                </el-image>
            </div>
            <el-button slot="reference" >音频、banner</el-button>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column label="操作" fixed='right' align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">

          <el-button type="primary" size="mini"
            @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button
            v-if="row.role!=1&&all_type==2" size="mini" type="danger" @click="handleDelete(row.id)">
            删除
          </el-button>
          <el-button type="success" size="mini"
            @click="clone(row.id,0)">
            克隆
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total>0" :page-sizes="pagesizes" :total="total" :page.sync="listQuery.page"
      :limit.sync="listQuery.limit" @pagination="list" />

    <!-- 添加修改 -->
    <el-dialog width="800px" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="top" label-width="70px"
        style="width: 400px; margin-left:50px;">

        <el-form-item label="模板名称" prop="name">
          <el-input v-model="temp.title" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="公告" prop="name">
          <el-input v-model="temp.Announcement" placeholder="请输入公告" />
        </el-form-item>

        <el-form-item label="可展示几条排行榜" prop="name">
          <el-input-number v-model="temp.ph_number" :min='1' />
        </el-form-item>

        <el-form-item label="可上传几张照票" prop="name">
          <el-input-number v-model="temp.update_img_number" :min='1' />
        </el-form-item>



        <el-form-item label="轮播图" prop="name">
          <el-upload
          v-if='dialogFormVisible'
            :action="lujing"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            multiple
             accept=".jpg, .jpeg,.png,.gif"
            :file-list="fileList"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="分享背景图" prop="name">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :action="lujing"
            :on-success="handleAvatarSuccess_fenx"

          >
            <img v-if="temp.background" :src="temp.background" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

        <el-form-item label="上传音频" prop="name">
         <el-upload
          v-if='dialogFormVisible'
           class="upload-demo"
           :action="lujing2"
           :on-success="yinpin_c"
           :on-remove="yinpin_s"
           accept=".mp3, .mp4"
           :file-list="yin_file_list"
           :limit="1"
           >
           <el-button size="small" type="primary">点击上传</el-button>

         </el-upload>
        </el-form-item>
        <el-form-item label="活动类型" prop="name">
          <el-select v-model="temp.is_video" placeholder="请选择">
              <el-option
                :key="0"
                label="照片活动"
                :value="0">
              </el-option>
              <el-option
                :key="1"
                label="视频活动"
                :value="1">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否每日刷新投票次数" prop="name">
          <el-select v-model="temp.is_day_t" placeholder="请选择">
              <el-option
                :key="0"
                label="是"
                :value="0">
              </el-option>
              <el-option
                :key="1"
                label="否"
                :value="1">
              </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="每日可投几票" prop="name" v-if='temp.is_day_t==0'>
          <el-input-number :min='1' v-model="temp.day_t_num" placeholder="请输入投票次数" />
        </el-form-item>

        <el-form-item label="是否可送礼物" prop="name">
          <el-select v-model="temp.is_liwu" placeholder="请选择">
              <el-option
                :key="0"
                label="是"
                :value="0">
              </el-option>
              <el-option
                :key="1"
                label="否"
                :value="1">
              </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="礼物组" prop="name" v-if='temp.is_liwu==0'>
          <el-select v-model="temp.liwu_id" placeholder="请选择">
              <el-option
                v-for="item in Gift_group"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="活动说明" prop="name">
           <Tinymce v-if='dialogFormVisible' width='700px' v-model="temp.Description" />
        </el-form-item>

        <el-form-item label="奖品说明" prop="name">
           <Tinymce2 v-if='dialogFormVisible' width='700px' v-model="temp.jpsm" />
        </el-form-item>

        <el-form-item label="自定义主题" prop="name">
           <el-select v-model="is_zdy" placeholder="请选择">
               <el-option
                 :key="0"
                 label="使用默认"
                 :value="0">
               </el-option>
               <el-option
                 :key="1"
                 label="自定义"
                 :value="1">
               </el-option>
             </el-select>
        </el-form-item>
        <el-form-item label="选择主色调" prop="name" v-if="is_zdy==1">
           <el-color-picker v-model="temp.color1"></el-color-picker>
        </el-form-item>
        <el-form-item label="选择辅色调" prop="name" v-if="is_zdy==1">
           <el-color-picker v-model="temp.color2"></el-color-picker>
        </el-form-item>

        <el-form-item label="上传title背景图" prop="name" v-if="is_zdy==1">
           <el-upload
             class="avatar-uploader"
             :show-file-list="false"
             :action="lujing"
             :on-success="handleAvatarSuccess_fenbj"

           >
             <img v-if="temp.titleback" :src="temp.titleback" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
        </el-form-item>
        <el-form-item label="上传排行榜banner" prop="name" v-if="is_zdy==1">
           <el-upload
             class="avatar-uploader"
             :show-file-list="false"
             :action="lujing"
             :on-success="handleAvatarSuccess_phbbanner"

           >
             <img v-if="temp.phb_banner" :src="temp.phb_banner" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
        </el-form-item>




        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
            确认
          </el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  // 引入api
  import api from '@/api/vote/vote_model.js'
  import Tinymce from '@/components/Tinymce'
  import Tinymce2 from '@/components/Tinymce/index2'
  // 引入分页
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import ThemePicker from '@/components/ThemePicker'

  export default {
    props:['all_type'],
    components: { Pagination , Tinymce , ThemePicker,Tinymce2},
    data() {
      return {
        yin_file_list:null,
        Gift_group:[],
        dialogImageUrl: '',
        fileList:[],
        dialogVisible: false,
        lujing: JSON.parse(localStorage.getItem('Config'))['image_update']['value'],

        lujing2: JSON.parse(localStorage.getItem('Config'))['video_update']['value'],
        musictype:false,
        multipleSelection:'',
        // 分页
        total: 0,
        pagesizes: [10, 30, 60, 100],
        // 列表数据
        tableData: [],
        // 权限列表
        roleData: null,
        // 权限列表筛选用
        roleData_: [
          {
            id: 0,
            name: '全部权限'
          }
        ],
        is_zdy:0,
        // 根据权限筛选
        rolemodel: 0,
        // 提交数据
        temp: {

        },
        // 密码
        password: '',
        // 判定加载
        loading: false,
        // 判定where
        listQuery: {
          page: 1,
          limit: 10,
          title: null,
          sort: 'asc'
        },
        // 判定显示
        dialogFormVisible: false,
        // 判定修改or添加
        dialogStatus: '',
        // 判定修改id
        up_id: 0,
        // 列表匹配数据群
        textMap: {
          update: '修改',
          create: '添加'
        },
        affix2: [
          {
            value: 0,
            label: '保留'
          },
          {
            value: 1,
            label: '不保留'
          }
        ],
        show: [
          {
            value: 0,
            label: '展示'
          },
          {
            value: 1,
            label: '不展示'
          }
        ],
        sortOptions: [
          { label: 'ID 升序', key: 'asc' },
          { label: 'ID 降序', key: 'desc' }
        ],
        mp3:''
      }
    },
    // 进入页面加载数据
    created() {
      this.list()
    },
    methods: {
      //克隆
      clone(id,type){
        if(id==0){
          id = ''
          for(var i=0;i<this.multipleSelection.length;i++){
              if(id==''){
                id = this.multipleSelection[i]['id']
              }else{
                id+= ','+this.multipleSelection[i]['id']
              }
          }
        }

        this.loading = true
        var than = this
        api.model_clone({
          id:id,
          type:type
        }).then(res => {
           than.loading = false
           // this.list.unshift(this.temp)
           than.list()
           than.dialogFormVisible = false
           than.$notify({
             title: '提示',
             message: '克隆成功',
             type: 'success',
             duration: 2000
           })
           than.$emit('numberbh', 1)
        }).catch(() => {
          than.dialogFormVisible = false

        })
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      handleAvatarSuccess_phbbanner(response, file){
        this.$forceUpdate()
        this.temp.phb_banner = response.data
      },
      handleAvatarSuccess_fenbj(response, file){
        this.$forceUpdate()
        this.temp.titleback = response.data
      },
      handleAvatarSuccess_fenx(response, file){
        this.temp.background = response.data
      },
      yinpin_c(response, file) {

        this.temp.music = response.data
        console.log(this.dialogImageUrl);
        this.$forceUpdate()
      },
      yinpin_s(file, fileList) {

        this.temp.music = null
        console.log(this.temp.banner);
      },
      handleAvatarSuccess(response, file) {

        if(!this.temp.banner){
          this.temp.banner = [response.data]
        }else{
          this.temp.banner = [...this.temp.banner,response.data]
        }

        console.log(this.temp.banner);
        this.$forceUpdate()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.up_banner(fileList)

      },
      up_banner(fileList){
        var arr = [];
        for(var i=0;i<fileList.length;i++){
          arr[arr.length] = fileList[i].url
        }
        this.temp.banner = arr
        console.log(this.temp.banner);
      },
      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //播放音频
      playmusic(mp3,type){
        this.mp3 = new Audio();
        this.mp3.src = mp3
        this.musictype = true
        if(type==1){
          mp3.play(); //播放 mp3这个音频对象
        }else{
          mp3.pause();
          mp3.load();
        }
      },
      go_info(id){
         this.$router.push({path:'/vote/gift_info',query:{id:id}});
      },
      // 冻结
      handleType(row, index, id, type) {
        var than = this
        var arr = ['解除冻结账号可正常登陆, 是否继续?', '冻结账号将无法正常登陆, 是否继续?']
        this.$confirm(arr[type], '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          api.frost({
            id: id,
            type: type
          }).then(() => {
            this.loading = false
            // this.list.unshift(this.temp)
            than.list()
            than.dialogFormVisible = false
            arr = ['禁用成功', '启用成功']
            than.$notify({
              title: '提示',
              message: arr[type],
              type: 'success',
              duration: 2000
            })
          })
        }).catch(() => {
          than.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 删除
      handleDelete(id,type=0) {
        if(id==0){
          id = ''
          for(var i=0;i<this.multipleSelection.length;i++){
              if(id==''){
                id = this.multipleSelection[i]['id']
              }else{
                id+= ','+this.multipleSelection[i]['id']
              }
          }
        }
        var than = this
        this.$confirm('该操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          api.del({
            type:type,
            id: id
          }).then(() => {
            this.loading = false
            // this.list.unshift(this.temp)
            than.list()
            than.dialogFormVisible = false
            than.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            than.$emit('numberbh', 1)
          })
        }).catch(() => {
          than.dialogFormVisible = false
          than.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 修改
      updateData() {


        this.loading = true
        var than = this
        console.log(this.temp)
        this.temp.password = this.password
        api.update({

          id: this.up_id,
          temp: this.temp
        }).then(res => {
          this.list()
          this.dialogFormVisible = false
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false
        })
      },
      // 添加
      createData() {

        this.loading = true
        var than = this
        console.log(this.temp)
        this.temp.password = this.password
        api.save({

          temp: this.temp
        }).then(res => {
          than.list()
          than.dialogFormVisible = false
          than.$emit('numberbh', 1)
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false

        })
      },
      // 还原提交数据
      resetTemp() {
        this.password = ''
        for (var key in this.temp) {
          delete this.temp[key]
        }
      },
      // 添加前钩子
      handleCreate(pid) {
        this.resetTemp(pid)
        this.fileList = []
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.temp.Description = null
        this.temp.jpsm = null
        this.temp.mp3 = null
        this.yin_file_list = null

        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 修改前钩子
      handleUpdate(row) {
        this.up_id = row.id

        this.password = ''
        this.temp = Object.assign({}, row) // copy obj


        this.fileList = []
        for(var i=0;i<this.temp.banner.length;i++){
          this.fileList[this.fileList.length] = {
            name:i,
            url:this.temp.banner[i]
          }

        }
        this.yin_file_list = [{

            name:this.temp.music,
            url:this.temp.music

        }]
        console.log(this.temp)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 获取列表
      list(title) {
        this.loading = true
        var than = this
        api.list({
          all_type:this.all_type,
          role_id: this.rolemodel,
          listQuery: this.listQuery
        }).then(res => {
          than.tableData = res.data.list
          than.total = res.data.count
          than.Gift_group = res.data.Gift_group
          than.loading = false
          than.dialogFormVisible = false
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false
        })
      },
      // 排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = 'asc'
        } else {
          this.listQuery.sort = 'desc'
        }
        this.handleFilter()
      },
      // 还原数据
      handleFilter() {
        this.listQuery.page = 1
        this.list()
      }
    }
  }
</script>
<style>
  .html{
    max-height: 500px;
    overflow-y: auto;
  }
  h1{
    text-align: center;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
